<template>
    <div class="list">
        <ul>
            <li v-for="(item, i) in $store.state.orders" :key="item.id">
                <div v-if="item.state === state">
                    <section>
                        <h3>{{item.name}}</h3>
                        <span>订单价格：{{item.price}}</span>
                    </section>
                    <section class="price">
                        <p>商品描述：{{item.subscribe}}</p>
                        <span @click="changeState(item.state, i)">{{item.state | typeText}}</span>
                    </section>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: '',
    props: {
        state: Number
    },
    filters: {
        typeText(val) {
            let text = ''
            switch(val) {
                case 0:
                text = '付款'
                break
                case 1:
                text = '发货'
                break
                case 2:
                text = '收货'
                break
                case 3:
                text = '再来一单'
                break
            }
            return text
        }
    },
    data() { 
        return {

        }
    },
    created() {

    },
    methods:{
        changeState(s, i) {
            if(s === 0) {
                this.$store.commit('changeState', {i, state: 1})
            } else if(s === 1) {
                this.$store.commit('changeState', {i, state: 2})
            } else if(s === 2) {
                this.$store.commit('changeState', {i, state: 3})
            } else if(s === 3) {
                this.$store.commit('changeState', {i, state: 0})
            }
            
        }
    },
}
</script>

<style lang="scss">
    .list ul {
        padding: 15px;
        padding-top: 0;
    }
    .list ul li div {
        background-color: #fff;
        padding: 10px;
        margin-top: 12px;
    }
    .price {
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
            width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        span {
            padding: 6px 15px;
            background-color: olivedrab;
            border-radius: 6px;
            color: #fff;
            font-size: 12px;
        }
    }
</style>